<template>
  <div id="searchGoodListPopup">
    <van-popup v-model="showPopup" round position="bottom" :close-on-click-overlay="false" :style="{ height: '75vh', overflow: 'hidden' }">
      <div class="navBox">
        <i class="iconfont icon-icon_fanhui" @click="closePopup"></i>
        <van-search v-model="keyword" placeholder="搜索商品标题" shape="round" @search="onSearch"> </van-search>
        <span class="navBox_txt" @search="onSearch">搜索</span>
      </div>
      <div class="txt">搜索结果</div>
      <div class="list">
        <div class="list_item" v-for="(item, index) in list" :key="index">
          <img :src="item.thumb" class="list_item_img" alt="" />
          <div class="detail">
            <div class="detail_title">{{ item.title }}</div>
            <div class="detail_price">
              <span class="currentPrice">{{item.has_option == 0?'¥'+item.price:''}}</span>
              <template v-if="item.stock > 0">
                <div class="specBtn" @click="showSpecs(item)" v-if="item.has_option == 1">选规格</div>
                <div class="specBtn" style="padding: 0 0.7813rem;width: auto;border-radius: 0.625rem;" @click="childSelect(item)" v-if="item.has_option == 0">
                  <i class="iconfont icon-icon_add" style="font-size: 10px;"></i>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="moreDataTxt" @click="getList('more')" v-if="page < total_page">点击加载更多</div>
      </div>
    </van-popup>
    <yz_optionShow
      diyAddTxt="<icon class='iconfont icon-icon_add'>"
      ref="optionShow"
      :shopCart="false"
      v-model="popupSpecs"
      :goodsInfo="goodsInfo"
      @cartChange="cartChange"
      @closePopup="closePopupOpt"
      @submitAction="submitAction_add"
    ></yz_optionShow>
  </div>
</template>
<script>
import yz_optionShow from "@/components/ui_components/yz_optionShow.vue";
export default {
  props: {
    showPopup: {
      type: Boolean,
      default: false
    },
    goods_type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      keyword: "",
      list: [],
      total_page: 0,
      page: 1,
      popupSpecs: false,
      goodsInfo: {},
      carts: {}
    };
  },
  components: { yz_optionShow },
  watch: {
    showPopup(newVal) {
      if (newVal) {
        this.keyword = "";
        this.init();
        this.getList();
      }
    }
  },
  methods: {
    onSearch() {
      this.init();
      this.getList();
    },
    cartChange(e) {
      console.log(e);
    },
    closePopupOpt(e) {
      this.popupSpecs = false;
    },
    submitAction_add(e) {
      e.goodsInfo.selectVal = 1;
      e.goodsInfo.option_id = e.optionsId;
      let option_item = e.goodsInfo.has_many_options
        .map(item => {
          if (item.id == e.optionsId) {
            return item;
          }
        })
        .filter(item => item);
      e.goodsInfo.option_name = option_item[0].title;
      e.goodsInfo.price = option_item[0].product_price;
      this.popupSpecs = false;
      this.goodsInfo = {};
      this.$emit("childSelect", e.goodsInfo); // 触发父组件的方法，并传递参数inf
    },
    showSpecs(item) {
      this.goodsInfo = item;
      this.popupSpecs = true;
    },
    childSelect(e) {
      if (e.has_option == 1) {
        this.goodsInfo = e;
        this.popupSpecs = true;
        return;
      }
      e.selectVal = 1;
      this.$emit("childSelect", e); // 触发父组件的方法，并传递参数inf
    },
    init() {
      this.page = 1;
      this.total_page = 0;
      this.list = [];
    },
    async getList(key) {
      if (key == "more") {
        if (this.page > this.total_page) {
          return;
        } else {
          this.page = this.page + 1;
        }
      }

      let { data, msg, result } = await $http.post(
        "plugin.self-bartending.api.common.goods.goods-list",
        {
          goods_type: this.goods_type, // 父组件传值，默认1
          keyword: this.keyword,
          page: this.page
        },
        "."
      );
      if (result) {
        if (key == "more") {
          this.list = this.list.concat(data.data);
          return;
        }
        this.list = data.data;
        this.total_page = data.last_page;
      } else {
        this.$toast(msg);
        if (key == "more") {
          this.page = this.page - 1;
        }
      }
    },
    closePopup() {
      this.$emit("close", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.specBtn {
  font-size: 12px;
  background: #f15353;
  color: #fff;
  border-radius: 1rem;
  width: 3.25rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
}
.moreDataTxt {
  text-align: center;
  color: #999999;
}
.list {
  margin: 0 0.75rem;
  padding-bottom: 3rem;
  max-height: 60vh;
  overflow-y: scroll;
  .list_item:first-child {
    padding-top: 0;
  }
  .list_item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .list_item {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.03rem solid #f5f5f5;
    padding: 0.94rem 0;
    .list_item_img {
      width: 3.13rem;
      height: 3.13rem;
      border-radius: 0.5rem;
      margin-right: 0.38rem;
      flex-shrink: 0;
    }
    .detail {
      flex: 1;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      .detail_title {
        flex: 1;
        font-weight: 500;
        font-size: 0.88rem;
        margin-bottom: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .detail_price {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: 0.88rem;
        .currentPrice {
          margin-right: 0.41rem;
          font-weight: 500;
          font-size: 0.88rem;
          color: #f15353;
        }
        .originalCost {
          font-size: 0.75rem;
          color: #999999;
        }
      }
    }
  }
}
.txt {
  text-align: center;
  font-size: 0.88rem;
  color: #999999;
  margin: 1rem 0;
}
.navBox {
  display: flex;
  align-items: center;
  padding-left: 1.06rem;
  padding-right: 0.81rem;
  .van-search {
    flex: 1;
  }
  .icon-icon_fanhui {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #6e6e79;
    margin-right: 1rem;
  }
  .navBox_txt {
    flex-shrink: 0;
    font-weight: 500;
    font-size: 0.88rem;
    color: #333333;
  }
}
</style>
